<template>
  <div  class="ksd-editor-mainbox">
    <div style="display: none">
      <Viewer v-model:value="editorValue" :plugins="plugins"></Viewer>
    </div>
    <Editor
        class="editor"
        :mode="mode"
        placeholder="请输入文章内容..."
        :editorConfig="editorConfig"
        :value="editorValue"
        :locale="zhHans"
        :plugins="plugins"
        :uploadImages="handleUploadImages"
        @change="handleEditorChange"
    />
  </div>
</template>

<script setup>
import 'bytemd/dist/index.css'
import gfm from '@bytemd/plugin-gfm'
import breaks from '@bytemd/plugin-breaks'
import highlight from '@bytemd/plugin-highlight'
import medium from '@bytemd/plugin-medium-zoom'
import mermaid from '@bytemd/plugin-mermaid'
import frontmatter from '@bytemd/plugin-frontmatter'
import {Editor,Viewer} from "@bytemd/vue-next"; // 导入编辑器组件
import zhHans from "bytemd/locales/zh_Hans.json";
import {debounce, throttle} from "../../composables/useThrottle.js";
const emits = defineEmits(["update:modelValue","update:html"])
const props = defineProps({
  modelValue:[String],
  html:[String],
  mode:{
    type:String,
    default:"auto"
  }
})

// 编辑器的插件
const plugins = ref([gfm(), highlight(), medium(), mermaid(), breaks(), frontmatter()])
// 编辑器的配置
const editorConfig = ref({
  tabSize: 8,
  lineNumbers: true
})
// 获取编辑器的内容
const editorHtmlValue = ref("")
const editorValue = ref("")
// 保存文章的对象
const article = reactive({
  title:"",
  content:"",
  categoryId:""
})

// 编辑器改变时候的事件监听，在这个方法可以实时获取用户最后输入的md的内容
const handleEditorChange = (val) => {
  editorValue.value = val
  emits("update:modelValue",val)
}


// 监听内容的变化
watch(editorValue,debounce(()=>{
  var dom = document.querySelector(".ksd-editor-mainbox .markdown-body");
  if(dom) {
    var html = document.querySelector(".ksd-editor-mainbox .markdown-body").innerHTML
    emits("update:html", html)
  }
},300),{immediate:true})


// 编辑器的图片上传
const handleUploadImages = async (files) => {
  // files----上传到服务器、oss文件存储里面中---并行上传---promise
  // Promise.all([promise1,promise2]) 和 Promise.race([promise1,promise2])
  // 为什么使用map。filsList.map()====返回数组,map有返回值和改变返回值能力
  return Promise.all(files.map(async (file) => {
    // 开始准备文件上传的对象
    const formData = new FormData();
    formData.set("file", file)
    formData.append("path", "xxxxxxx")
    // 把选择的文件用异步请求上传到服务器即可
    const resp = await useOssUploadFileApi(formData)
    // 获取服务器上传成功的数据
    const {url} = resp.data
    // 开始渲染到编辑中，注意格式笔数是：{url:"xxxxxxx"}
    return {url}
  }))
}

// 清空编辑器
const handleClearEditor = () =>{
  editorValue.value = ""
}

// 清空编辑器
const handleSetEditor = (val) =>{
  editorValue.value = val
}

defineExpose({
  handleClearEditor,
  handleSetEditor
})
</script>

<style  scoped>
.ksd-editor-mainbox  :deep(.CodeMirror-lines){
  max-width: 100% !important;
}

.ksd-editor-mainbox :deep(.markdown-body) {
  max-width: 100% !important;
}

.ksd-editor-mainbox {
  z-index: 1000;
}

.ksd-editor-mainbox .editor :deep(.bytemd) {
  height: calc(100vh - 50px) !important;
}
</style>